<link rel="stylesheet" href="page/followup/css/patientManager/patientList.css">
<style>
    .list-wrapper .content {
        padding: 20px;
        margin-top: 0;
    }

    .el-table--border,
    .el-table--group {
        border: 1px solid #ddd;
    }

    .el-table td,
    .el-table th.is-leaf {
        border-bottom: 1px solid #ddd;
    }

    .el-table--border td,
    .el-table--border th,
    .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
        border-right: 1px solid #ddd;
    }

    .el-table--enable-row-transition .el-table__body td {
        padding: 4px 0;
    }
</style>

<body>
<div class="list-wrapper" id="wrapper">
    <div class="title">患者列表</div>
    <div class="search">
        <el-row>
            <el-col :span="4" style="margin-right: 10px;">
                <span>姓名：</span>
                <el-input v-model="keyword" size="small" style="width: calc(100% - 60px);" placeholder="请输入姓名"
                          clearable/>
            </el-col>
            <el-col :span="4" style="margin-right: 10px;">
                <span>住院号：</span>
                <el-input v-model="hospitalNo" size="small" style="width: calc(100% - 70px);" placeholder="请输入住院号"
                          clearable/>
            </el-col>
            <el-col :span="4" style="margin-right: 10px;">
                <span>床号：</span>
                <el-input v-model="bedNo" size="small" style="width: calc(100% - 60px);" placeholder="请输入床号"
                          clearable/>
            </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
            <el-col :span="4" style="margin-right: 10px;">
                <span>医院：</span>
                <el-select v-model="hospitalName" size="small" style="width: calc(100% - 60px);">
                    <el-option label="全部" value="全部"></el-option>
                    <el-option v-for="(item, index) in hospitalNames" :key="index" :label="item"
                               :value="item"></el-option>
                </el-select>
            </el-col>
            <el-col :span="4" style="margin-right: 10px;">
                <span>患者状态：</span>
                <el-select v-model="status" size="small" style="width: calc(100% - 80px);">
                    <el-option label="全部" value="全部"></el-option>
                    <el-option label="在院" value="在院"></el-option>
                    <el-option label="转到其他病区" value="转到其他病区"></el-option>
                    <el-option label="出院" value="出院"></el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
            </el-col>
        </el-row>
    </div>
    <div class="content">
        <el-table :data="table.data" :border="true" v-loading="table.loading" element-loading-text="加载中...">
            <el-table-column prop="No" align="center" label="序号" width="50"/>
            <!--            <el-table-column prop="hospitalBedNo" align="center" label="床号">-->
            <!--                <template slot-scope="scope">-->
            <!--                    {{ scope.row.extraBed + scope.row.hospitalBedNo }}-->
            <!--                </template>-->
            <!--            </el-table-column>-->
            <el-table-column prop="name" align="center" label="姓名"/>
            <!--            <el-table-column prop="inPatientNo" align="center" label="住院号"/>-->
            <el-table-column prop="birthday" align="center" label="出生日期"/>
            <el-table-column prop="phone" align="center" label="联系电话"/>
            <el-table-column prop="inpatientDate" align="center" label="入院日期"/>
            <el-table-column prop="outHospitalTime" align="center" label="出院日期" v-if=" type == '出院' "/>
            <el-table-column prop="transferHospitalTime" align="center" label="转入日期" v-if="type == '转到其他病区'"/>
            <!--            <el-table-column prop="hospitalName" align="center" label="来源医院"/>-->
            <!--            <el-table-column prop="status" align="center" label="患者状态"/>-->
            <el-table-column width="180" label="操作">
                <template slot-scope="scope">
                    <!--            <a @click="handleShowDialog(scope.row)"-->
                    <!--              style="color: #119BA9; margin-right: 10px;cursor: pointer;">更改患者状态</a>-->
                    <a @click="handleToDetail(scope.row)" style="color: #175FB5;cursor: pointer;">查看</a>
                </template>
            </el-table-column>
        </el-table>
        <div class="footer">
            <el-pagination background @current-change="handleChangePage" @size-change="handleSizeChange"
                           layout="prev, pager, next, total, sizes" :page-size="table.size" :total="table.total"/>
        </div>
    </div>

    <!-- dialog -->
    <el-dialog title="变更患者状态" :visible.sync="dialog.show" width="30%">
        <el-form :model="dialog.data">
            <el-form-item label="患者状态">
                <el-radio-group v-model="dialog.data.status" style="padding-top: 4px;">
                    <el-radio label="在院">在院</el-radio>
                    <el-radio label="出院">出院</el-radio>
                    <el-radio label="转到其他病区">转到其他病区</el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="dialog.data.status !== '在院'">
                <el-form-item label="出院诊断" v-if="dialog.data.status !== '转到其他病区'">
                    <el-input style="width: calc(100% - 100px)" placeholder="请输入出院诊断" type="textarea" :rows="5"
                              v-model="dialog.data.diagnosis"/>
                </el-form-item>
                <el-form-item label="转入备注" v-else>
                    <el-input style="width: calc(100% - 100px)" placeholder="请输入转入备注" type="textarea" :rows="5"
                              v-model="dialog.data.remark"/>
                </el-form-item>
                <el-form-item :label="dialog.data.status == '转到其他病区' ? '转入日期' : '出院日期'">
                    <el-date-picker v-model="dialog.data.date" type="date" placeholder="选择日期" size="small">
                    </el-date-picker>
                </el-form-item>
            </template>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" size="small" :loading="dialog.loading">确 定</el-button>
      </span>
    </el-dialog>

</div>
<script>
    require(['fu/app/patientManager/patientList'], function ($event) {
        $event.init()
    })
</script>
</body>
